/// File: app/creator-subscribe.tsx
import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, Dimensions } from 'react-native';
import { useRouter } from 'expo-router';
import { useState } from 'react';

const { width, height } = Dimensions.get('window');

const plans = [
    {
      id: 'coffee',
      title: '請我飲咖啡 😄',
      price: 'HK$60 / month',
      image: require('../../assets/logo.png'),
      description: [
        '我暫時把我的投資理財資訊免費在 YouTube 發布，',
        '但如果你想支持這個平台，也可以請我飲杯咖啡 😉。',
        '目前 Patreon 的定額捐款為 $5/月，並可獲得 YouTube 影片的聲音檔 😄。',
        '有關 Patreon 的特別收費資訊，我會視平台未來走向再作考慮 😊。',
        '提供資訊僅作參考分享用途，並不構成任何證券/債券/貴金屬/商品/加密貨幣的購買、購買或認購的邀請/建議。',
        '',
        '會員福利：',
        '• Thank you Message',
      ],
    },
    {
      id: 'lunch',
      title: '請我食午餐 🍱',
      price: 'HK$150 / month',
      image: require('../../assets/logo.png'),
      description: [
        '除了聲音檔，還會定期發布投資筆記 PDF，',
        '並邀請參與私密 TG Channel 🎯。'
      ],
    },
    {
      id: 'support',
      title: '全力支持 💎',
      price: 'HK$300 / month',
      image: require('../../assets/logo.png'),
      description: [
        '可參與每月線上直播 QA，',
        '並享有一次 1 對 1 投資顧問體驗 💬。'
      ],
    },
  ];

  export default function CreatorSubscribe() {
    const router = useRouter();
    const [activeIndex, setActiveIndex] = useState(0);
  
    const handleScroll = (event) => {
      const index = Math.round(event.nativeEvent.contentOffset.x / width);
      setActiveIndex(index);
    };
  
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
          <Text style={styles.backText}>← 返回</Text>
        </TouchableOpacity>
  
        <Text style={styles.header}>選擇支持方案</Text>
  
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          pagingEnabled
          snapToAlignment="center"
          contentContainerStyle={styles.sliderWrapper}
          onScroll={handleScroll}
          scrollEventThrottle={16}
        >
          {plans.map((plan) => (
            <View key={plan.id} style={styles.cardWrapper}> 
              <View style={styles.cardInner}>
                <ScrollView contentContainerStyle={styles.cardScroll}>
                  <Image source={plan.image} style={styles.image} />
                  <Text style={styles.title}>{plan.title}</Text>
                  <Text style={styles.price}>{plan.price}</Text>
  
                  <View style={styles.descriptionBox}>
                    {plan.description.map((line, index) => (
                      <Text key={index} style={styles.description}>{line}</Text>
                    ))}
                  </View>
                </ScrollView>
  
                <View style={styles.buttonStickyWrapper}>
                  <TouchableOpacity style={styles.buttonSticky}>
                    <Text style={styles.buttonText}>加入</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          ))}
        </ScrollView>
  
        <View style={styles.dotContainer}>
          {plans.map((_, index) => (
            <View
              key={index}
              style={[styles.dot, activeIndex === index && styles.activeDot]}
            />
          ))}
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      paddingTop: 60,
    },
    backBtn: {
      marginBottom: 12,
      paddingHorizontal: 20,
    },
    backText: {
      color: '#555',
      fontSize: 14,
    },
    header: {
      fontSize: 20,
      fontWeight: '600',
      color: '#111',
      marginBottom: 16,
      paddingHorizontal: 20,
    },
    sliderWrapper: {
      paddingHorizontal: 0,
    },
    cardWrapper: {
      width: width,
      height: height - 180,
      justifyContent: 'center',
      alignItems: 'center',
    },
    cardScroll: {
      paddingHorizontal: 20,
      paddingBottom: 20,
    },
    cardInner: {
      backgroundColor: '#f9f9f9',
      borderRadius: 16,
      paddingTop: 20,
      paddingBottom: 0,
      flex: 1,
      justifyContent: 'space-between',
      width: width - 40,
      overflow: 'hidden',
    },
    image: {
      width: '100%',
      height: 140,
      resizeMode: 'contain',
      borderRadius: 12,
      marginBottom: 12,
    },
    title: {
      fontSize: 18,
      fontWeight: '600',
      color: '#222',
      marginBottom: 4,
      paddingHorizontal: 20,
    },
    price: {
      fontSize: 16,
      color: '#666',
      marginBottom: 10,
      paddingHorizontal: 20,
    },
    descriptionBox: {
      paddingHorizontal: 20,
    },
    description: {
      fontSize: 13,
      color: '#444',
      lineHeight: 20,
      marginBottom: 4,
    },
    buttonStickyWrapper: {
      paddingHorizontal: 20,
      paddingBottom: 16,
    },
    buttonSticky: {
      backgroundColor: '#0a84ff',
      paddingVertical: 14,
      borderRadius: 10,
      alignItems: 'center',
    },
    buttonText: {
      color: '#fff',
      fontWeight: '600',
      fontSize: 15,
    },
    dotContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 25,
    },
    dot: {
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: '#ccc',
      marginHorizontal: 4,
    },
    activeDot: {
      backgroundColor: '#0a84ff',
    },
  });